<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container" style="float: right">
      <el-input
        v-model="listQuery.userId"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入用户编号"
      />
      <el-input
        v-model="listQuery.username"
        clearable
        class="filter-item"
        style="width: 200px"
        placeholder="请输入用户名称"
      />
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找
      </el-button
      >
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >添加
      </el-button
      >
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <!-- element表格 -->
      <el-table-column align="center" label="用户编号" prop="userId"/>

      <el-table-column
        align="center"
        min-width="100"
        label="用户名称"
        prop="username"
      />

      <el-table-column align="center" property="iconUrl" label="用户图片">
        <template slot-scope="scope">
          <img :src="scope.row.userImg" width="40"/>
        </template>
      </el-table-column>


      <el-table-column align="center" label="用户性别" prop="userSex"/>
      <el-table-column
        align="center"
        label="操作"
        width="200"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleUpdate(scope.row)"
          >编辑
          </el-button
          >
          <el-button type="danger" size="mini" @click="handleDelete(scope.row)"
          >删除
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :pageSizes="[2, 5, 10, 20]"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-tooltip placement="top" content="返回顶部">
      <back-to-top :visibility-height="100"/>
    </el-tooltip>
  </div>
</template>

<style>
.table-expand {
  font-size: 0;
}

.table-expand label {
  width: 100px;
  color: #99a9bf;
}

.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}

.gallery {
  width: 80px;
  margin-right: 10px;
}
</style>

<script>
import {listGoods, deleteGoods} from "@/api/goods/goods";
import {listUsers, deleteUsers} from "@/api/user";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "GoodsList",
  components: {BackToTop, Pagination},
  data() {
    return {
      list: [], // 数据列表
      total: 0, // 数据总数
      listLoading: true,
      // element-admin 分页
      listQuery: {
        page: 1, // 页码
        limit: 20, // 每页条数
        userId: undefined, // 用户编号
        username: undefined, // 用户名称（支持模糊查询）
        sort: "add_time",
        order: "desc",
        flag: true,
      },
      // 查看详情数据
      goodsDetail: "",
      detailDialogVisible: false, // 模态框状态
    };
  },
  created() {
    // 页面信息初始化
    this.getList();
  },
  methods: {
    // 获取列表数据
    getList() {
      this.listLoading = true;
      listUsers(this.listQuery)
        .then((response) => {
          this.list = response.data.data; // response.data.data.list
          this.total = response.data.total; //response.data.data.total
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    // 查询按钮钩子
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    // 添加用户按钮跳转
    handleCreate() {
      this.$router.push({path: "/system/addusers"});
    },
    // 编辑用户跳转
    handleUpdate(row) {
      this.$router.push({
        path: "/system/editusers",
        query: {id: row.userId},
      });
    },

    // 删除用户
    handleDelete(row) {
      this.$confirm("此操作将删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteUsers(row.userId)
            .then((response) => {
              this.$notify.success({
                title: "成功",
                message: "删除成功",
              });
              const index = this.list.indexOf(row);
              this.list.splice(index, 1);
            })
            .catch((response) => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg,
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
